<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		p,ul{margin: 0; padding: 0; list-style: none;}
		#box div{float: left; width: 200px; text-align: center;margin-right: 2px;}
		p{border: 1px solid #000;background-color: #f34336}
		ul{background-color: #ccc;height: 0; opacity:0; filter:alpha(opacity:0);}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oBox = document.getElementById('box');
		var aP = oBox.getElementsByTagName('p');
		var aUl = oBox.getElementsByTagName('ul');
		var iNow = 0;

		for (var i = 0; i < aP.length; i++) {
			aP[i].index = i;
			aP[i].onmouseover = function (){
				aUl[this.index].style.height = 'auto';			//先设置自动适应的高度
				var h = aUl[this.index].offsetHeight;
				aUl[this.index].style.height = 0;
				
				doMove(aUl[this.index], {'height':h, 'opacity':100})
			}
			aP[i].onmouseout = function (){
				doMove(aUl[this.index], {'height':0, 'opacity':0})
			}				
		};
	}

	function doMove(obj, json){
		clearInterval(obj.timer);

		obj.timer = setInterval(function(){
			var bStop = true;

			for (var attr in json){
				var iCur = 0;

				if (attr == 'opacity') {
					iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
				}else{
					iCur = parseInt(getStyle(obj, attr));
				}

				var iSpeed = (json[attr]-iCur)/8;
				iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

				if (attr == 'opacity') {
					obj.style.opacity = (iCur + iSpeed)/100;
					obj.style.filter = 'alpha(opacity:'+ (iCur + iSpeed) +')';
				}else{
					obj.style[attr] = iCur + iSpeed + 'px';
				}

				if (iCur != json[attr]) {
					bStop = false;
				};
			}

			if (bStop) {
				clearInterval(obj.timer);
			};
		},30)
	}

	function getStyle(obj, attr){
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
	}
	</script>
</head>
<body>
	<div id="box">
		<div>
			<p>首页</p>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
		<div>
			<p>产品</p>
			<ul>
				<li>A</li>
				<li>B</li>
				<li>C</li>
				<li>D</li>
				<li>E</li>
			</ul>
		</div>
		<div>
			<p>服务</p>
			<ul>
				<li>一</li>
				<li>二</li>
				<li>三</li>
				<li>四</li>
			</ul>
		</div>
	</div>
</body>
</html>